<script setup>
import {defineProps, defineEmits} from 'vue';
import {ref} from 'vue'
import axios from "axios";
import lightOnSrc from '@/assets/关灯.png';
import lightOffSrc from '@/assets/开灯.png';
import powerOnSrc from '@/assets/开机.png';
import powerOffSrc from '@/assets/关机.png';
const props = defineProps(); // 定义 props
const emit = defineEmits(['option-selected']); // 定义 emit
const selectOption = (option) => {
  emit('option-selected', option); // 发送选项选择事件
};
const lightOn = ref(false);
const powerOn = ref(false);
const lightText = ref('开灯');
const powerText = ref('关机');

const toggleLight = () => {
  lightOn.value = !lightOn.value;
  lightText.value = lightOn.value ? '关灯' : '开灯'; // 修改文字内容
  sendDataToServerByLight('light', lightOn.value);
};

const togglePower = () => {
  powerOn.value = !powerOn.value;
  powerText.value = powerOn.value ? '关机' : '开机'; // 修改文字内容
  sendDataToServer('power', powerOn.value);
};

const sendDataToServer = (key, value) => {
  const url = '/switch/' + value;
  axios.get(url, {}).then(response => {
    console.log('Data sent successfully:', response.data);
  }).catch(error => {
    console.error('Error sending data:', error);
  });
};
const sendDataToServerByLight = (key, value) => {
  const url = '/light/' + value;
  axios.get(url, {}).then(response => {
    console.log('Data sent successfully:', response.data);
  }).catch(error => {
    console.error('Error sending data:', error);
  });
};
</script>
<template>
  <div class="button-container">
    <div>
      <button class="custom-button" @click="selectOption(1)"><strong>摄像头</strong></button>
    </div>
    <div>
      <button class="custom-button" @click="selectOption(2)"><strong>地图</strong></button>
    </div>
    <div>
      <button class="custom-button" @click="selectOption(3)"><strong>概念图</strong></button>
    </div>
  </div>
  <div class="operates">
    <div class="up-buttons">
      <div class="show-light" @click="toggleLight">
        <div class="light-text">
          {{lightText}}
        </div>
        <div class="light-button">
          <img :src="lightOn ? lightOffSrc : lightOnSrc" alt="">
        </div>
      </div>
      <div class="show-light" @click="togglePower">
        <div class="light-text">
          {{powerText}}
        </div>
        <div class="light-button">
          <img :src="powerOn ? powerOnSrc : powerOffSrc" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.button-container {
  margin-left: 120px;
  display: flex;
  flex-direction: column; /* 将按钮布局设置为垂直方向 */
  justify-content: space-between;
  height: 320px; /* 设置容器高度 */
}

.custom-button {
  background-color: #f0f0f0; /* 浅灰色背景 */
  border: none; /* 移除按钮边框 */
  border-radius: 10px; /* 圆角 */
  width: 200px; /* 设置按钮宽度 */
  height: 90px; /* 设置按钮高度 */
  font-size: 16px; /* 字体大小 */
  color: #333; /* 文字颜色 */
  cursor: pointer; /* 鼠标样式为指针 */
  transition: background-color 0.3s ease; /* 过渡效果 */
}

.custom-button:hover {
  background-color: #ccc; /* 鼠标悬停时的背景色 */
}

.operates {
  width: 400px;
  height: 100px;
  margin-left: 100px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.operates .up-buttons {
  width: 200px;
  height: 50px;
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.show-light {
  display: flex;
  flex-direction: column;
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border-radius: 10px; /* 圆角 */
  margin-left: 20px;
}

.show-light .light-button {
  height: 50px;
  width: 50px;
  margin-left: 20px;
  margin-top: 10px;
}

.show-light .light-button img {
  width: 100%;
  height: 100%;
}

.light-text {
  width: 80px;
  height: 25px;
  line-height: 25px;
  font-size: 20px;
  margin-left: 10px;
}
</style>

